<template>
	<view class="content">
		<navigationbar :leftIcon="leftIcon" :leftText="leftText" :title="title" :autoBack="false" />
		<view class="search"><u-search disabled placeholder="搜索职位/公司" :showAction="false" @click="search"></u-search></view>
		<view class="swiper">
			<swiper :circular="true" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1f24ae54-f413-4707-aa3f-f365584e95cd/7d8f451f-d053-4e3d-8b6b-02bc0766c88b.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1f24ae54-f413-4707-aa3f-f365584e95cd/a54325d4-78fc-46de-9fe7-bb0e1218b860.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1f24ae54-f413-4707-aa3f-f365584e95cd/832ec9d8-05e6-43c7-a714-124a59dd3264.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-sticky :offsetTop="offsetTop" bgColor="white">
			<view class="positionList">
				<view class="plLeft">
					<view class="plLeftContent">
						<view class="plLeftItem" @click="selectPtl(index,item)" v-for="(item, index) in positionList" :key="index">
							<text :class="index === select_ptl ? 'ptl-select' : ''">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="plLright" @click="selectCity"><text>+</text></view>
			</view>
		</u-sticky>
		<view class="jobCard">
			<view :key="index" v-for="(item, index) in list" class="positionItem" @click="jobDetail(item)">
				<view class="positionContent">
					<view class="jobName">
						<text class="name">{{ item.name }}</text>
						<text class="salary">{{ item.salary }}</text>
					</view>
					<view class="jobCompany">
						<text>{{ item.recruitment.company }} {{ item.company.scale }} {{ item.company.financing }}</text>
					</view>
					<view class="jobLabel">
						<text :key="index" v-for="(item, index) in item.title" class="label">{{ item }}</text>
					</view>
					<view class="jobLocation">
						<text class="region">{{ item.postinfo.location }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="contentBottom">
			<view class="box"></view>
			<text>我也有底线的~</text>
		</view>
		<u-popup :round="10" :mode="center" :show="show" :closeable="true" @close="close">
			<view class="popupContent">
				<text>该功能需要登录</text>
				<view class="btn"><u-button type="primary" text="去登录" @click="toUser"></u-button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import navigationbar from '../navigationBar.vue';
export default {
	components: {
		navigationbar
	},
	data() {
		return {
			center: 'center',
			show: false,
			title: '找工作',
			leftIcon: 'map',
			leftText: '上海',
			offsetTop: 0, //吸顶距离
			positionList: [],
			data: [],
			select_ptl: 0,
			list: ''
		};
	},
	created() {
		this.setOffestTop();
	},
	onShow() {
		uniCloud.callFunction({
			name:'getPostList',
			success:(res) => {
				this.list = this.data = res.result.data
			}
		})
		this.leftText = this.$store.state.currentCity
		if(this.$store.state.currentCity){
			this.list = this.data.filter(item => {
				let str = item.postinfo.location
				return str.indexOf(this.leftText) !== -1
			})
		}
		this.show = false
		if(this.$store.state.switch){
			uniCloud.callFunction({
				name: 'test',
				data:{
					id: this.$store.state.userID
				},
				success: (res) => {
					this.positionList = res.result.data,
					this.positionList.unshift({
						code: 0,
						name: '综合'
					})
				}
			})
		}
		this.getUserInfo()
	},
	onLoad() {
		uni.getStorage({
			key: 'user_id',
			success: res => {
				let userID = res.data;
				uniCloud
					.callFunction({
						name: 'test',
						data: {
							id: userID
						}
					})
					.then(res => {
						this.positionList = res.result.data ? res.result.data : [];
						this.positionList.unshift({
							code: 0,
							name: '综合'
						});
					});
			},
			fail: res => {
				uniCloud
					.callFunction({
						name: 'test',
						data: {
							id: '61d85fb159c1fa0001927b9a'
						}
					})
					.then(res => {
						this.positionList = res.result.data ? res.result.data : [];
						this.positionList.unshift({
							code: 0,
							name: '综合'
						});
					});
			}
		});
	},
	methods: {
		getUserInfo() {
			uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
					id: this.$store.state.userID
				},
				success: res => {
					this.$store.commit('setUserInfo', res.result.data);
				}
			});
		},
		jobDetail(data) {
			this.$store.commit('setPostData',data)
			uni.navigateTo({
				url: '../postDetail/postDetail',
				animationType: 'pop-in',
				animationDuration: 200
			})
		},
		search() {
			uni.navigateTo({
				url: '../indexSearch/indexSearch',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		selectPtl(index,_data) {
			this.select_ptl = index;
			if(_data.code === 0){
				this.list = this.data
			}else{
				this.list = this.data.filter(item => {
					return item.code === _data.code
				})
			}
		},
		selectCity() {
			if(!this.$store.state.userID){
				this.show = true
				return
			}
			console.log(this.$store.state.userInfo)
			this.$store.commit('setIntentionKey', true)
			uni.navigateTo({
				url: '../user/intention/intention'
			})
		},
		// 计算吸顶距离
		setOffestTop() {
			let systemInfo = uni.getSystemInfoSync();
			let topPx = systemInfo.statusBarHeight + 44;
			this.offsetTop = topPx;
		},
		
		
		// 弹出框
		toUser() {
			uni.switchTab({
				url: '../user/user'
			});
		},
		close() {
			this.show = false
		}
	}
};
</script>

<style lang="scss">
.content {
	.swiper {
		width: 95%;
		height: 300rpx;
		margin: 10rpx auto;
		border-radius: 20rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 300rpx;
		}
	}

	.search {
		width: 95%;
		margin: 10rpx auto;
	}

	.u-sticky {
		width: 100%;
		border-bottom: 1rpx solid #eeeeee;
		background-color: white;

		.positionList {
			width: 95%;
			margin: 0 auto;
			height: 110rpx;
			position: relative;

			.plLeft {
				height: 100%;
				width: 80%;
				padding-left: 10rpx;

				.plLeftContent {
					display: flex;
					flex-flow: row;
					overflow-x: auto;

					.plLeftItem {
						margin-right: 25rpx;

						text {
							width: auto;
							font-size: 32rpx;
							line-height: 110rpx;
							white-space: nowrap;
						}
					}
				}
			}

			.plLright {
				display: inline-block;
				width: 20%;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;

				text {
					float: right;
					width: 80%;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					margin-top: 25rpx;
					font-size: 50rpx;
					border-radius: 5rpx;
					background-color: #eeeeee;
				}
			}
		}
	}

	.jobCard {
		width: 100%;
		border-bottom: 1rpx solid transparent;
		background-color: #eeeeee;

		.positionItem {
			width: 100%;
			background-color: white;
			margin-bottom: 20rpx;

			.positionContent {
				width: 95%;
				height: 100%;
				margin: 0 auto;
				padding-top: 10rpx;
				font-size: 30rpx;
				.jobName,
				.jobCompany {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					padding: 5rpx 10rpx;
					margin: 10rpx 0;
					.name {
						font-size: 40rpx;
					}
					.salary {
						font-size: 35rpx;
						color: rgb(89, 120, 254);
					}
				}
				.jobLabel {
					margin: 20rpx 0;
					padding: 5rpx 10rpx;
					.label {
						font-size: 27rpx;
						background-color: rgb(236, 236, 236);
						margin-right: 10rpx;
						padding: 10rpx;
						border-radius: 15rpx;
					}
				}
				.jobLocation {
					.region {
						margin-bottom: 10rpx;
						float: right;
					}
				}
				.jobLocation:after {
					content: '';
					display: block;
					clear: both;
				}
			}
		}
	}

	.contentBottom {
		width: 100%;
		height: 100rpx;
		margin-top: 20rpx;
		position: relative;

		.box {
			height: 20rpx;
			border-bottom: 1rpx dashed #b5b5b5;
		}

		text {
			display: inline-block;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 25rpx;
			background-color: white;
			position: absolute;
			color: #b5b5b5;
		}
	}
}

.plLeftContent::-webkit-scrollbar {
	display: none;
}

.content::-webkit-scrollbar {
	display: none;
}

.popupContent {
	width: 400rpx;
	height: 200rpx;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	text {
		margin-top: 20rpx;
	}
	.btn {
		width: 50%;
	}
}

</style>
